<template>
	<view>
		<!-- 搜索框组件 -->
		<view class="u_search">
			<view class="search">
				<search></search>
			</view>
			<view class="grid">
				<u-tabs :list="list" lineColor="#fff"></u-tabs>
			</view>
		</view>
		<!-- 商品信息 -->
		<view class="goodslist">
			<view class="goodsInfo" v-for="item in goodslist" :key="item.id">
				<view class="_image">
					<image :src='item.img' mode=""></image>
				</view>
				<view class="goodsName">
					<view>
						{{item.goodsname}}
					</view>
					<view>
						¥{{item.price}}
					</view>
					<view class="del">
						¥{{item.market_price}}
					</view>
					<view @click="goDetail(item.id)" class='btn'>查看详情</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// 引入搜索组件
	import search from '@/components/search/search.vue'
	// 引入封装好的接口
	import {
		getGoodList
	} from '@/request/app.js'
	export default {
		data() {
			return {
				goodslist: [],
				list: [{
						id: 1,
						name: '综合排序'
					},
					{
						id: 2,
						name: '销量'
					},
					{
						id: 3,
						name: '价格'
					},
					{
						id: 4,
						name: '好评度'
					},
					{
						id: 5,
						name: '店铺'
					},
					{
						id: 6,
						name: '商家'
					},
					{
						id: 7,
						name: '筛选'
					},
				],
			}
		},
		methods: {
			// 跳转详情页事件
			goDetail(id) {
				uni.navigateTo({
					url: '../goodsDetail/goodsDetail?id=' + id
				})
			}
		},
		onLoad(opation) {
			console.log(opation.cateid, "列表页opation");
			// 调用接口
			getGoodList({
					cateid: opation.cateid,
					type: 2
				})
				.then(res => {
					console.log(res, "列表接口");
					if(res.data.code == 200){
						this.goodslist = res.data.list.goodData.map(item => ({
						goodsname: item.goodsname,
						id: item.id,
						img: this.$imgUrl + item.img,
						market_price: item.market_price,
						price: item.price
					}))
					console.log(this.goodslist, "列表");
					}
					
				})
		}
	}
</script>

<style lang="less">
	.u_search {
		width: 100%;
		height: 60px;
		line-height: 60px;
		background-color: tomato;

		.search {
			width: 400px;
			margin: auto;
		}

		.grid {
			background-image: linear-gradient(180deg, #FF6040 0%, #FF8A80 100%);
			box-shadow: 0 2px 6px 0 rgba(255, 149, 128, 0.50);
		}
	}

	.goodsInfo {
		display: flex;
		box-shadow: 2px 5px 6px rgba(0, 0, 0, 0.25);
		padding: 10px;
		box-sizing: border-box;
		margin: 17px 0;

		._image image {
			width: 120px;
			height: 110px;
			margin-right: 20px;
		}

		.goodsName view {
			width: 270px;
			margin: 5px 0;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.goodsName .btn {
			width: 100px;
			background-color: bisque;
			text-align: center;
		}

		.goodsName .del {
			text-decoration: line-through;
			color: #dedede;
			font-size: 15px;
		}
	}

	.goodslist {
		margin-top: 50px;
	}
</style>
